import React, { Component } from 'react'
import './App.css'
import MagicView from './MagicView'
import MagicEdit from './MagicEdit'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      order: 3,
      store: {
        3: [
          {
            start: [1, 1],
            end: [3, 3],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          },
          {
            start: [3, 1],
            end: [4, 3],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          },
          {
            start: [1, 3],
            end: [4, 4],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          }
        ],
        4: [
          {
            start: [1, 1],
            end: [4, 4],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          },
          {
            start: [4, 1],
            end: [5, 4],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          },
          {
            start: [1, 4],
            end: [4, 5],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          },
          {
            start: [4, 4],
            end: [5, 5],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          }
        ],
        5: [
          {
            start: [1, 1],
            end: [4, 4],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          },
          {
            start: [4, 1],
            end: [6, 4],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          },
          {
            start: [1, 4],
            end: [4, 6],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          },
          {
            start: [5, 5],
            end: [6, 6],
            linkUrl: 'http://dr2009.com',
            imgUrl: 'http://dr2009.com/favicon.ico'
          }
        ]
      }
    }
  }

  render () {
    const {order, store} = this.state
    return (
      <div>
        <MagicView order={order} list={store[order]}/>
        <hr />
        <input type="radio" name="order" value={3} checked={order === 3} onChange={e => this.setState({order: 3})}/>
        三阶
        <input type="radio" name="order" value={4} checked={order === 4} onChange={e => this.setState({order: 4})}/>
        四阶
        <input type="radio" name="order" value={5} checked={order === 5} onChange={e => this.setState({order: 5})}/>
        五阶
        <MagicEdit
          order={order}
          list={store[order]}
          removeItem={this.removeItem}
          updateItem={this.updateItem}
          addItem={this.addItem}
        />
      </div>
    )
  }

  removeItem = (index) => {
    const {order, store} = this.state
    store[order].splice(index, 1)
    this.setState({store})
  }

  updateItem = (index, data) => {
    const {order, store} = this.state
    store[order][index] = data
    this.setState({store})
  }

  addItem = (data) => {
    const {order, store} = this.state
    store[order].push(data)
    this.setState({store})
  }

}

export default App
